<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="vue-app">
    <h1>{{ greet("afternoon") }}</h1>
    <h1>{{name}}</h1>
    <!--绑定-->
    <a v-bind:href="website" >web开发</a>
    <!--显示html-->
    <p v-html="websiteTag"> </p>

    <h1>Events</h1>
    <button v-on:click.once="add">涨一岁</button>
    <button @click="subtract">减一岁</button>
    <!--双击事件-->
    <button v-on:dblclick="add">涨岁</button>
    <button v-on:dblclick="subtract">减一岁</button>
    <button v-on:click="addinc(10)">涨岁</button>

    <!--鼠标监听-->    <p> My age is {{age}}</p>
    <div id="canvse" v-on:mousemove="updateXY">
        {{x}},{{y}} -
        <span @mousemove="stopMoving">Stop Moving</span>
    </div>
    <!--跳转-->
    <a @click="alert()" href="http://www.baidu.com">the new step</a>
    <!--禁止跳转-->
    <a @click.prevent="alert()" href="http://www.baidu.com">the new step stop</a>
</div>
<script src="app.js"></script>
</body>
</html>